<template>
    <div class="userCenter">
        <Row v-for="(item,index) in data">
            <Col span="12" class="user_list">
            <Col span="4" >服务器名：</Col><span v-show="!flag">{{ item.villageName }}</span>
            <input type="text"  v-show="flag" v-model=" item.villageName ">
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit user_ionic" v-show="!flag"  @click="flag=true"></i>
            <i class="ivu-icon ivu-icon-checkmark-round user_ionic"  v-show="flag" @click="update"></i>
            </Col>
            <Col span="12" class="user_list">


            <Col span="4" >图片地址：</Col><span v-show="!flag">{{item.photos.split(',')[0]}}</span>
            <!--<img :src="photos" alt="这是商品图片">-->
            <input type="text"  v-show="flag" v-model="item.photos.split(',')[0]" />
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit user_ionic" v-show="!flag"  @click="flag=true"></i>
            <i class="ivu-icon ivu-icon-checkmark-round  user_ionic"  v-show="flag" @click="update"></i>
            </Col>
            <Col span="12" class="user_list">
            <Col span="4" >ip地址：</Col><span v-show="!flag">{{item.address}}</span>
            <input type="text"  v-show="flag" v-model="item.address">
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit  user_ionic" v-show="!flag"  @click="flag=true"></i>
            <i class="ivu-icon ivu-icon-checkmark-round  user_ionic"  v-show="flag" @click="update"></i>
            </Col>
            <Col span="12" class="user_list">
            <Col span="4" >部门：</Col><span v-show="!flag">{{item.city}}</span>
            <input type="text"  v-show="flag" v-model="item.city">
            <!--<Icon type="ios-compose-outline"></Icon>-->
            <i class="ivu-icon ivu-icon-edit  user_ionic" v-show="!flag"  @click="flag=true"></i>
            <i class="ivu-icon ivu-icon-checkmark-round  user_ionic"  v-show="flag" @click="update"></i>
            </Col>

        </Row>
        <div class="operationInfo">
            <Col span="12">
            <Button class="infoBtn" type="primary" @click="addInfo">添加</Button>

            </Col>
            <Col span="12">
            <Button class="infoBtn infoSubmit" :disabled="stateBtn"  @click="infoSubmit">提交</Button>

            </Col>


        </div>

    </div>
</template>

<script>
//  import $ from 'jquery';
  import util from '../../libs/util';
  import modalMessage from '../../components/modalMessage.vue'
    export default {
        name: '',
        data () {
            return {
              name:'哈哈',
              flag: false,
              data:[],
              photos: {},
              stateBtn:true,
              value1:'',
              value2:''
            }
        },
      components:{
        modalMessage
      },
      created() {
        this.getInfo()
      },
      methods: {
//        makeEdit() {
//          this.flag = !this.flag
//        },
        update() {
          this.data = this.data
          this.flag = !this.flag
          this.stateBtn = false
        },
        getInfo() {
//          var _this = this
          let url = '/react-service/api/houseInfo/getDetail.do'
          let ajaxUrl = 'http://121.40.178.164:4040'
          let data = {
              id: '8a2f424c5bd7c854015c0aa783d401d3'
          }
//          data = Qs.stringify(data)
//          $.ajax({
//            url: 'http://121.40.178.164:4040/agent-service/api/user/login.do',
//            contentType: 'application/x-www-form-urlencoded',
//            type: 'post',
//            data: {
//              loginName: 'admin',
//              loginPwd:'123456'
//            }
//          }).done((result) => {
//            console.log(result);
//          })
          util.ajax.post(url, data).then((result) => {
            let data = result.data.res.data.record
            this.data.push(data)
//            this.data = data
            let photos = this.data.photos.split(',')[0]

            this.photos = photos
//              this.photos =ajaxUrl + photos
            console.log(photos)
          }).catch((error) => {
            console.log(error)
          })
        },
        infoSubmit() {
          let url = '/react-service/api/houseInfo/getDetail.do'
//          let data = {
//            id: '8a2f424c5bd7c854015c0aa783d401d3'
//          }
          let data = this.data
//          this.data.push(data)
         util.ajax.post(url,data).then((res) => {
           console.log(res)
         })
        },
        addInfo() {
          this.$Modal.confirm({
            scrollable:false,
            closable:true,
            okText:'确定',
            render: (h) => {
              return h(modalMessage, {
                props: {
                  value1:this.value1,
                  value2:this.value2
                },
                on: {
                  value1: (value1) => {
                    this.value1 = value1
                  },
                  value2: (value2) => {
                    this.value2 = value2
                  }
                }
              })
            },
            onOk: () => {
              if (this.value1 == '' && this.value2 == '') {
                this.$Message.error('信息填写不完整!')
              }else{
                let url = '/react-service/api/houseInfo/getDetail.do'
                let data ={
                  id:'8a2f424c5bd7c854015c0aa783d401d3'
                }
                util.ajax.post(url,data).then((res) => {
                  console.log(res)
                })
                const msg = this.$Message.loading({
                  content: '正在保存..',
                  duration: 0
                })
//                console.log(value1)
              }
//              this.saveLink(msg)
            }
          })
        }
      }
    }
</script>


<style scoped>
    .user_list{
        padding: 20px 0;
    }
    .user_ionic{
        margin-left: 10px;
    }
    .operationInfo{
        float: right;
        padding: 2% 5%;
    }
    .infoSubmit{
        background: #F96F39;
        color: #fff;
        border-color: #F96F39;
        margin-left: 20px;
    }
    .infoSubmit:hover {
        background: #FF9800;
        color: #fff;
        border-color: #FF9800;
    }
    .infoBtn{
        width: 90px;
    }
    .ivu-icon{
        cursor: pointer;
    }
    .ivu-icon-edit:hover{
        color: #F96F39;
    }
    .ivu-icon-checkmark-round:hover{
        color: #F96F39;
    }

</style>
